<template>
  <div>
    <my-header></my-header>
    <el-container>
      <!-- 左侧页面栏开始 -->
      <el-aside width="194px">
        <div>
          <i class="el-icon-document-copy"></i>
          我的文件
        </div>
        <div>
          <i class="el-icon-share"></i>
          我的分享
        </div>
        <div>
          <i class="el-icon-delete"></i>
          回收站
        </div>
      </el-aside>
      <!-- 左测页面栏结束 -->
      <el-main>
        <!-- 内容功能栏开始 -->
        <div class="contentnav">
          <!-- 按钮开始 -->
          <div class="btns">
            <el-button type="primary" class="elbtn" style="color: #fff"
              ><i class="el-icon-upload2" style="padding-right: 3px"></i
              >上传</el-button
            >
            <el-button plain class="elbtn"
              ><i class="el-icon-folder-add" style="padding-right: 3px"></i
              >新建</el-button
            >
            <el-button plain class="elbtn"
              ><i class="el-icon-download" style="padding-right: 3px"></i
              >离线下载</el-button
            >
          </div>
          <!-- 按钮结束 -->
          <!-- 搜索及排序开始 -->
          <div class="right">
            <input type="text" placeholder="搜索您的文件" />
            <div class="search"><i class="el-icon-search iconhover"></i></div>
            <div class="icon"><i class="el-icon-s-fold"></i></div>
            <div class="icon"><i class="el-icon-menu"></i></div>
          </div>
          <!-- 搜索及排序结束 -->
        </div>
        <!-- 内容功能栏结束 -->
        <!-- 内容列表栏开始 -->
        <div>
          <p>我的文件</p>
          <!-- 表格开始 -->
          <el-table :data="tableData" style="width: 100%;height:50%;">
            <el-table-column width="35">
                <el-checkbox>全选</el-checkbox>
            </el-table-column>
            <el-table-column prop="name" label="文件名" width="180">
            </el-table-column>
            <el-table-column prop="size" label="大小" width="180">
            </el-table-column>
            <el-table-column prop="time" label="修改日期"> </el-table-column>
          </el-table>
          <!-- 表格结束 -->
        </div>
        <!-- 内容列表栏结束 -->
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");
.el-aside {
  background-color: #f7f7f7;
  color: #666666;
  /* text-align: center; */
  padding-top: 10px;
  position: absolute;
  height: 500px;
}
.el-aside div {
  position: relative;
  display: block;
  height: 46px;
  width: 114px;
  margin: 0 auto;
  padding: 5px 40px;
  cursor: pointer;
  line-height: 40px;
}
.el-aside div:hover {
  background: #eaeaea;
}
.el-aside div i {
  padding-right: 6px;
}
.el-main {
  margin-left: 194px;
  height: 500px;
  position: absolute;
}
.el-main .contentnav {
  display: flex;
  height: 35px;
}
.el-main .btns {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.el-main .btns .elbtn {
  height: 35px;
  width: 130xp;
  /* text-decoration: none; */
  color: #09aaff;
  border: 1px solid #c3eaff;
  border-radius: 4px;
  padding: 10px;
}
.el-main .right {
  display: flex;
}
.el-main .right input {
  width: 280px;
  border: 0px solid #fff;
  background: #f1f2f4;
  padding: 10px 20px;
  border-radius: 30px;
  outline: none;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.el-main .right .search {
  width: 20px;
  border: 0px solid #fff;
  background: #f1f2f4;
  padding: 10px 20px;
  border-radius: 30px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.el-main .right .search .iconhover:hover {
  color: #09aaff;
}
.el-main .right .icon {
  width: 20px;
  padding: 10px 5px;
}
</style>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "a",
          size: "21kb",
          time: "2016-05-03",
        },
        {
          name: "b",
          size: "20mb",
          time: "2016-05-02",
        },
        {
          name: "c",
          size: "39mb",
          time: "2016-05-04",
        },
        {
          name: "d",
          size: "654mb",
          time: "2016-05-01",
        },
        {
          name: "e",
          size: "66kb",
          time: "2016-05-07",
        },
        {
          name: "f",
          size: "34mb",
          time: "2016-05-07",
        },
        {
          name: "e",
          size: "88kb",
          time: "2016-05-07",
        },
      ],
    };
  },
};
</script>